<template>
  <a-modal
      title="欢迎注册"
      cancelText="取消"
      :centered="true"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :okText="isRegist ? '注册' : '保存'"
      @ok="handlerRegist"
      @cancel="handlerCancel"
  >
    <div class="form-box">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
        <a-form-item label="账号">
          <a-input :disabled="true" v-model="formData.userName" v-focus placeholder="请输入账号"/>
        </a-form-item>

        <a-form-item label="昵称">
          <a-input v-model="formData.nickName" v-focus placeholder="请输入昵称"/>
        </a-form-item>

        <a-form-item label="原密码" v-if="!isRegist">
          <a-input-password v-model="formData.oldPwd" v-focus placeholder="请输入原密码"/>
        </a-form-item>

        <a-form-item label="新密码">
          <a-input-password v-model="formData.password" v-focus placeholder="请输入新密码"/>
        </a-form-item>

        <a-form-item label="确认密码">
          <a-input-password v-model="formData.rePwd" v-focus placeholder="请确认密码"/>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
import {mapState} from "vuex";
import Vue from "vue";

export default {
  props: ["visible", "isRegist"],
  data() {
    return {
      confirmLoading: false,
      formData: {
        userName: "",
        nickName: "",
        password: "",
        oldPwd: "",
        rePwd: "",
      },
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  created() {
    if (!this.isRegist) {
      for (let key in this.formData) {
        if (this.userInfo[key]) {
          Vue.set(this.formData, key, this.userInfo[key]);
        }
      }
    }
  },
  methods: {
    handlerRegist() {
      let userNameReg = /^[a-zA-Z0-9_-]{4,12}$/;
      let pwdReg = /^[a-zA-Z0-9_]{6,16}$/;
      let formdata = JSON.parse(JSON.stringify(this.formData));

      if (!userNameReg.test(formdata.userName)) {
        this.$message.warning("请输入格式正确的账号！");
        return;
      }

      if (this.isRegist) {
        if (formdata.nickName.length < 1) {
          this.$message.warning("请输入昵称！");
          return;
        }

        if (!pwdReg.test(formdata.password)) {
          this.$message.warning("请输入格式正确的新密码！");
          return;
        } else if (formdata.password != formdata.reRwd) {
          this.$message.warning("您的新密码与确认密码不一致！");
          return;
        }
      } else {
        if (pwdReg.test(formdata.oldPwd)) {
          if (formdata.password != formdata.rePwd) {
            this.$message.warning("您的新密码与确认密码不一致！");
            return;
          } else if (
              formdata.password != "" &&
              !pwdReg.test(formdata.password)
          ) {
            this.$message.warning("请输入格式正确的新密码！");
            return;
          }
        }
      }
      this.confirmLoading = true;
      this.$http(
          "/user/register",
          {regist: this.isRegist ? 1 : -1, ...this.formData},
          "post"
      ).then((res) => {
        if (res.code) {
          this.$message.success(res.msg);
          let userInfo = JSON.parse(JSON.stringify(this.userInfo));
          for (let key in userInfo) {
            if (this.formData[key]) {
              userInfo[key] = this.formData[key];
            }
          }

          // 如果修改了密码则退出登录
          if (
              this.formData.password &&
              this.formData.oldPwd &&
              this.formData.password === this.formData.rePwd
          ) {
            this.$store.dispatch("logout");
            this.$storage.set("userInfo", {});
          } else {
            this.$store.commit("userInfo", userInfo);
            this.$storage.set("userInfo", userInfo);
          }
          this.handlerCancel();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handlerCancel() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="less">
</style>
